/**
 * Created by tiansha on 2016/4/18.
 */

import React, {Component} from 'react';
import ReactDom from 'react-dom'
import Grid from 'react-bootstrap/lib/Grid';
import Button from 'react-bootstrap/lib/Button';
import Pagination from 'react-bootstrap/lib/Pagination';
import { Link } from 'react-router';

import ImageUpload from './ImageUpload'

export default class EmployeeList extends Component {

  constructor(props) {
    super(props);
    this.handleFetch = this.handleFetch.bind(this);
    this.handleInput = this.handleInput.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleFetch(number) {
    var pageSize = ReactDom.findDOMNode(this.refs.pageSize).value;
    this.props.fetchEmployees({size: pageSize, page: number});
  }

  handleInput(e) {
    e.preventDefault();
    this.handleFetch(0);
  }

  handleSelect(event, selectedEvent) {
    this.handleFetch(selectedEvent.eventKey-1);
  }

  componentDidMount() {
    //this.handleFetch(0);
  }

  onChange() {}

  render() {
    var employees = this.props.employees;
    var list = employees.content.map((item, index) => <li key={index}>{item.description}</li>);

    return (
      <div>
        <h2>Employees:</h2>
        Page: <input ref="pageSize" defaultValue={this.props.employees.size} onInput={this.handleInput}/>
        <ul>
          {list}
        </ul>
        <Pagination
          prev
          next
          first
          last
          ellipsis
          boundaryLinks
          items={this.props.employees.totalPages}
          maxButtons={5}
          activePage={this.props.employees.number+1}
          onSelect={this.handleSelect} />
        <br/>
        <Button bsStyle="primary" onClick={this.handleFetch}>Fetch</Button> {' '}
        <Link className="btn btn-default" to={"/createEmployee"} >Create</Link>
      </div>
    );
  }
}
